<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <script>
        $(function () {
            console.log("hello javascript");
        });
        //$(函数); // 固定逻辑，表示当前页面加载完毕之后，要去之行的函数
        // 相当于 window.onload = function(){}
        // write less do more

        // $() => jquery选择器 -> 返回的是jquery对象. 可以随意使用
        // jquery中的各种功能
        // document.querySelector() => 通过选择器选择页面上的内容
        // -> 返回的是dom -> $(dom对象)

        // 绑定事件， 当按钮被点击的时候，输出一句话

        // 从功能上说，是一样的，但是从代码编辑的唯独来说. jquery 更精简
        // 原生js写法

        window.onload = function () {
            document.querySelector("#btn_dom").addEventListener("click", function () {
                console.log("原生js -> 被人点击了 ")
            });
        };

        $(function () {
            $("#btn_jquery").click(function () {
                console.log("jquery -> click");
            });
        });

        //

    </script>
</head>
<body>

<input type="button" value="普通按钮" id="btn_dom">
<input type="button" value="jquery按钮" id="btn_jquery">

</body>
</html>